<template>
    <view class="load-more">
        <!--加载中-->
        <view class="loading" v-if="loading && !finished">
           <uni-load-more status="loading" iconType="circle" color="#c6c6c6" :contentText="contentText"></uni-load-more>
        </view>

        <!--加载完成-->
        <view class="finished" v-if="finished">
            <uni-load-more status="noMore" color="#c6c6c6" :contentText="contentText"></uni-load-more>
        </view>
		
		<!-- 空页面展示 -->
		<view class="empty" v-if="empty">
			<image mode="widthFix" class="image" v-if="emptyType === 'goods'" src="@/static/images/common/empty-goods.png" />
			<image mode="widthFix" class="image" v-if="emptyType === 'record'" src="@/static/images/common/empty-record.png" />
			<image mode="widthFix" class="image" v-if="emptyType === 'search'" src="@/static/images/common/empty-search.png" />
			<image mode="widthFix" class="image" v-if="emptyType === 'collect'" src="@/static/images/common/empty-collect.png" />
			<text class="text">{{ emptyText }}</text>
		</view>
    </view>
</template>

<script>
	import UniLoadMore from "@/components/uni/LoadMore";
	export default {
		name: 'LoadMore',
		components: {
			UniLoadMore
		},
        props: {
			loading: {
				type: Boolean,
                default: () => {
                	return false;
                }
            },
			finished: {
				type: Boolean,
                default: () => {
                	return false;
                }
            },
			empty: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			emptyType: {
				type: String,
				default: () => {
					return 'goods';
				}
			},
			emptyText: {
				type: String,
				default: () => {
					return '暂无商品~';
				}
			}
        },
		data() {
			return {
				contentText: {
					contentdown: '上拉显示更多哦~',
					contentrefresh: "正在拼命加载中...",
					contentnomore: "没有更多了哦~"
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
    .load-more {
        width: 100%;
        color: #969799;
        text-align: center;
        padding-bottom: 10rpx;
		font-size: 26rpx;
        .loading {
            width: 100%;
            color: #969799;
			@include flexBox(center);
        }
        .finished {
            color: #969799;
			@include flexBox(center);
        }
		.empty {
			width: 100%;
			@include flexBox(center, center, column);
			.image {
				width: 300rpx;
			}
		}
    }
</style>